<template>
  <div class="detail-action" v-if="order">
    <div class="state">
      <span :class="['iconfont', 'icon-order-' + orderStatus[order.orderState - 0].name]"></span>
      <p v-if="order.orderState === 1 && order.countdown === -1">订单已超时</p>
      <p v-else>{{ orderStatus[order.orderState - 0].label }}</p>
    </div>
    <div class="info">
      <p>订单编号：{{ order.id }}</p>
      <p>下单时间：{{ order.createTime }}</p>
    </div>
    <div class="btn">
      <xtx-button v-if="order.orderState === 1 && order.countdown !== -1" type="primary" size="small" @click="$router.push('/member/pay?id='+order.id)">立即付款</xtx-button>
      <xtx-button v-if="order.orderState === 3" type="primary" size="small">确认收货</xtx-button>
      <xtx-button @click="$router.push(`/member/checkout?id=${order.id}`)" v-if="[2, 3, 4, 5].includes(order.orderState)"
        type="primary" size="small">再次购买</xtx-button>
      <xtx-button v-if="[4, 5].includes(order.orderState)" type="primary" size="small">申请售后</xtx-button>
    </div>
  </div>
</template>
<script setup>
import { computed, defineProps } from 'vue'
import { orderStatus } from '@/config'
const props = defineProps({
  order: {
    type: Object,
    default: () => ({})
  }
})
// 计算属性
const order = computed(() => {
  return props.order
})
</script>
<style scoped lang="less">
.detail-action {
  height: 180px;
  width: 100%;
  display: flex;
  align-items: center;

  .state {
    width: 220px;
    text-align: center;

    .iconfont {
      font-size: 40px;
      color: @xtxColor;
    }

    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }
  }

  .info {
    width: 240px;
    line-height: 30px;

    p {
      color: #999;
    }
  }

  .btn {
    flex: 1;
    text-align: right;
    margin-right: 100px;

    .xtx-button {
      margin-left: 20px;
    }
  }
}
</style>